<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        .content {
            width: 600px;
            border: 1px solid red;
            border-radius: 5px;
            margin: 50px auto;
            padding: 10px;
        }

        header input {
            width: 575px;
            height: 30px;
            padding-left: 20px;
            outline: none;
        }

        header input:focus {
            border-color: rgba(255, 0, 0, 0.3);
            box-shadow: 0 0 5px #f66;
        }

        .todo {
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid rgb(164, 163, 163);
        }

        .todo button {
            float: right;
            margin-top: 12px;
        }

        footer {
            height: 40px;
            line-height: 50px;
        }

        footer button {
            float: right;
            margin-top: 12px;
        }
    </style>
</head>

<body>
    <div id='app'>
        <div class="content">
            <todo-header @add-todo="addTodo"></todo-header>

            <todo-item @del-todo="delTodo" v-for="todo in todoList" :key="todo.id" :todo="todo"></todo-item>


            <footer>
                <input v-model="isAll" type="checkbox" name="" id="">
                <span>
                    <span>已完成 {{isCount}} 件</span>
                    /
                    <span>总计：{{todoList.length}} 件</span>
                </span>
                <button @click="delList">清除已完成</button>
            </footer>

        </div>
    </div>
</body>

<template id="header">
    <header>
        <input v-model="title" type="text" placeholder="请输入待办事项" @keyup.enter="add">
    </header>
</template>

<template id="todoItem">
    <div class="todo" :style="{backgroundColor: bgColor}" @mouseleave="delShow(false)" @mouseenter="delShow(true)">
        <input type="checkbox" v-model="todo.isFlag" name="" id="">
        {{todo.title}}
        <button v-show="isShowDel" @click="delClick(todo.id)">删除</button>
    </div>
</template>

<script>



    const app = Vue.createApp({
        data() {
            return {
                todoList: [
                    { id: '123oiaweudioawhdiaukh', isFlag: false, title: '吃一顿烧烤' },
                    { id: '123oidfsfdshdiaukh', isFlag: true, title: '中午还要睡上一觉' },
                    { id: '123oiaweudigfdsdfdshdiaukh', isFlag: false, title: '㊗️全天下妇女节快乐' },
                ]
            }
        },
        methods: {
            addTodo(title) {
                this.todoList.unshift({
                    id: Math.random(),
                    title,
                    isFlag: false
                })
            },
            delTodo(id) {
                this.todoList = this.todoList.filter(item => item.id != id)
            },
            delList() {
                for (let i = this.todoList.length - 1; i >= 0; i--) {
                    // console.log(i);
                    if (this.todoList[i].isFlag) {
                        this.todoList.splice(i, 1)
                    }
                }
            }
        },
        computed: {
            isCount() {
                // 计算被选择的数量
                return this.todoList.reduce((num, item) => {
                    return num + (item.isFlag ? 1 : 0)
                    // 设置初始值
                }, 0)
            },
            isAll: {
                get() {
                    // 设置我们选中的数量和总数量做对比，如果相等就是全选
                    return this.isCount == this.todoList.length ? true : false
                },
                set(val) {
                    this.todoList.forEach(todo => {
                        todo.isFlag = val
                    })
                }
            }
        }
    })

    // 头部组件
    app.component('todo-header', {
        template: '#header',
        data() {
            return {
                title: ''
            }
        },
        methods: {
            // 输入的内容提交
            add() {
                // 将内容传递给父组件
                this.$emit('addTodo', this.title)
                // 添加后清除表单内容
                this.title = ''
            }
        }
    })
    app.component('todo-item', {
        template: '#todoItem',
        data() {
            return {
                isShowDel: false,
                bgColor: '#fff'
            }
        },
        props: ['todo'],
        methods: {
            delClick(id) {
                // console.log(id);
                this.$emit('delTodo', id)
            },
            delShow(flag) {
                // console.log(flag);
                this.isShowDel = flag
                this.bgColor = flag ? '#ccc' : '#fff'
            }
        }
    })

    const vm = app.mount('#app')
</script>

</html>